<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .box {
                margin: 15px auto;
                height: 50px;
                background: #dfdfdf;
            }
        </style>
    </head>
    <body>

        <h3>指令: v-show / v-if </h3>

        <div id="root">
            <input type="radio" v-model="show" value="false" id="hide"> 
            <label for="hide">隐藏</label>
            <input type="radio" v-model="show" value="true" id="show">
            <label for="show">显示</label>
            <p> hide: {{ show }}</p>

            <div class="box" v-show="show"></div>
            <div class="box" v-if="show"></div>
        </div>

        <script src="vue.global.js"></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        show: false
                    }
                }
            });
            const instance = app.mount('#root');
        </script>
        
    </body>
</html>